import zhCN from 'element-plus/es/locale/lang/zh-cn';
import enUS from 'element-plus/es/locale/lang/en';
import { defineStore } from 'pinia';
import { useStorage } from '@vueuse/core';
import { ref, reactive, computed } from 'vue';

export const useAppStore = defineStore('app', () => {
	const sidebarStatus = useStorage('sidebarStatus', '1');
	const sidebar = reactive({
		opened: false,
		withoutAnimation: false,
		hide: false
	});
	const device = ref('desktop');
	const size = useStorage('size', 'default');
	//  添加 menuData 和 menuShow
	const menuData = ref({}); // 菜单数据
	const menuShow = ref(false); // 菜单是否显示
	const menuParentPath = ref() // 父菜单路径
	//  方法：修改菜单数据
	const setMenuData = (data) => {
		menuData.value = data;
	};
	//  方法：修改菜单显示状态
	const setMenuShow = (status) => {
		menuShow.value = status;
	};
	// 方法：修改父菜单路径
	const setMenuParent = (path) => {
		menuParentPath.value = path
	}
	// 语言
	const language = useStorage('language', 'zh_CN');
	const languageObj = {
		en_US: enUS,
		zh_CN: zhCN
	};
	const locale = computed(() => {
		return languageObj[language.value];
	});

	const toggleSideBar = (withoutAnimation) => {
		if (sidebar.hide) {
			return false;
		}

		sidebar.opened = !sidebar.opened;
		sidebar.withoutAnimation = withoutAnimation;
		if (sidebar.opened) {
			sidebarStatus.value = '1';
		} else {
			sidebarStatus.value = '0';
		}
	};

	const closeSideBar = ({ withoutAnimation }) => {
		sidebarStatus.value = '0';
		sidebar.opened = false;
		sidebar.withoutAnimation = withoutAnimation;
	};
	const toggleDevice = (d) => {
		device.value = d;
	};
	const setSize = (s) => {
		size.value = s;
	};
	const toggleSideBarHide = (status) => {
		sidebar.hide = status;
	};

	const changeLanguage = (val) => {
		language.value = val;
	};

	return {
		device,
		sidebar,
		language,
		locale,
		size,
		menuData,
		menuShow,
		menuParentPath,
		changeLanguage,
		toggleSideBar,
		closeSideBar,
		toggleDevice,
		setSize,
		toggleSideBarHide,
		setMenuData,
		setMenuShow,
		setMenuParent
	};
});
